; (function (node) {

    // todoList 构造函数
    var TodoList = function () {
        var _self = this;

        this.node = node;
        this.showInputFlag = false; //输入框显示隐藏的状态
        this.isEdit = false;//是否是编辑状态
        this.curIdx = null; // 当前编辑的第几项的下标
        // this.curLiConten = null; // 当前编辑的li的value值

        // 配置默认项，对比this.config与this.dConfig的键值是否都有
        this.dConfig = {
            "plusBtn": "",
            "inputArea": "",
            "addBtn": "",
            "list": "",
            "itemClass": "",
            "inputContext": ""
        }
        this.config = this.getConfig();  //将返回的配置对象保存到构造函数里面
        this.className = this.config.itemClass;


        for (var key in this.dConfig) {
            if (!this.config.hasOwnProperty(key)) {
                console.log(errorInfo(key));
                // 用console.log 而不用 alert的原因：是因为这个插件是给程序员用的，这个代码错误
                // 是用于程序员调试用的，所以不用alert
                return;
            }
        }

        this.setConfig();

        // 点击加号按钮，输入框显示与隐藏
        addEvents(this.plusBtn, 'click', function () {
            _self.showInput();
        });

        // 点击增加项目按钮，添加item
        addEvents(this.addBtn, 'click', function () {
            _self.addItem();
        });

        // 给list绑定点击事件，事件委托
        addEvents(this.list, 'click', function (e) {
            // 寻找事件源兼容性
            var e = e || window.event,
                tar = e.target || e.srcElement;

            _self.listClick(tar);
        })
    }

    // TodoList 原型
    TodoList.prototype = {
        getConfig: function () {
            return JSON.parse(this.node.getAttribute('data-config'));
            // this.node.getArrtibute('data-config') 返回配置属性的属性值字符串
            // JSON.parse()  将JSON字符串转换为JSON对象
        },

        setConfig: function () {
            var config = this.config,
                node = this.node;

            // 输入框显示与否按钮
            this.plusBtn = node.getElementsByClassName(config.plusBtn)[0];
            // 输入框和提交按钮区域
            this.inputArea = node.getElementsByClassName(config.inputArea)[0];
            // 增加项目/修改 按钮
            this.addBtn = this.inputArea.getElementsByClassName(config.addBtn)[0];
            // 输入框
            this.context = document.getElementById(config.inputContext);
            // todolist区域
            this.list = node.getElementsByClassName(config.list)[0];
        },

        // 显示/隐藏 input框方法
        showInput: function () {
            if (this.showInputFlag) {
                var oitems = this.list.getElementsByClassName(this.className);
                setInputStatus.apply(this, [oitems, null, 'add']);
                setInputshow.call(this, 'close');
            } else {
                setInputshow.call(this, 'open');
            }
        },

        // 增加项目方法
        addItem: function () {
            var val = this.context.value,
                // config = this.config,
                listItems = this.list.getElementsByClassName(this.className),
                listItemsLen = listItems.length,
                newItem = document.createElement('li'),
                contextItem;  //获取输入框输入的内容

            if (!val) {
                alert('输入内容不能为空，请重新输入！');
                return;
            }

            if (this.isEdit) {
                var curItem = listItems[this.curIdx];
                contextItem = this.context.value;
                elemChildren(curItem)[0].innerHTML = contextItem;
                listItems[this.curIdx].className = this.className;
                setInputStatus.apply(this, [listItems, null, 'add']);
            } else {
                for (var i = 0; i < listItemsLen; i++) {
                    // 判断输入项目的内容是否重复，如果重复则不添加
                    contextItem = elemChildren(listItems[i])[0].innerHTML;

                    if (contextItem === val) {
                        alert('输入内容已存在，请重新输入！');
                        setInputshow.call(this, 'close');
                        return;
                    }
                }

                newItem.className = this.className;
                newItem.innerHTML = itemTpl(val);
                this.list.appendChild(newItem);
            }
            setInputshow.call(this, 'close');

        },

        // 删除/修改项目 方法
        listClick: function (tar) {
            var oitems = this.list.getElementsByClassName(this.className),
                oParent = elemParent(tar, 2),
                className = tar.className;

            if (className === 'delete') {
                // 点击了删除按钮
                oParent.remove();
                setInputStatus.apply(this, [oitems, null, 'add']);
            } else if (className === 'edit') {
                // 点击了编辑按钮
                setInputStatus.apply(this, [oitems, oParent, 'edit']);
                setInputshow.call(this, 'open');
                this.context.value = elemChildren(oParent)[0].innerHTML;
            }
        }

    }

    // input区域 增加项目按钮的两种状态 add / edit
    function setInputStatus(oItems, target, status) {
        var item,
            itemLen = oItems.length;

        for (var i = 0; i < itemLen; i++) {
            item = oItems[i];
            item.className = this.className;
        }

        if (status === 'edit') {
            var index;

            target.className += ' active';
            index = Array.prototype.indexOf.call(oItems, target);
            this.addBtn.innerHTML = '编辑第' + (index + 1) + '项';
            this.isEdit = true;
            this.curIdx = index;
        } else if (status === 'add') {
            this.addBtn.innerHTML = '增加项目';
            this.context.value = '';
            this.isEdit = false;
            this.curIdx = null;
        }
    }


    // 切换显示隐藏状态
    function setInputshow(active) {
        if (active === 'open') {
            this.context.value = "";
            this.inputArea.style.display = 'block';
            this.showInputFlag = true;
        } else if (active === 'close') {
            this.inputArea.style.display = 'none';
            this.showInputFlag = false;
        }
    }

    // li模板
    function itemTpl(text) {
        return ('<p class="item-context">' + text + '</p>' +
            '<div class="btn-wrap">' +
            '<button class="delete">删除</button>' +
            '<button class="edit">编辑</button>' +
            '</div>'
        );
    }

    // 错误信息模板
    function errorInfo(key) {
        return new Error(
            '您没有配置参数' + key + '\n请检查配置参数' +
            '必须配置的参数列表如下：\n' +
            '打开输入框按钮元素类名：plusBtn\n' +
            '输入框区域元素类名：inputArea\n' +
            '增加项目按钮元素类名： addBtn \n' +
            '列表承载元素类名：list\n' +
            '列表项承载元素类名：itemClass'
        );
    }

    new TodoList();
})(document.getElementsByClassName('wrap')[0]);